<template>
  <div id="index-r">
    <div class="set-cherts new-h">
        <div class="top-s" style="font-size: 14px;">标准煤</div>
        <div class="set-con new-c-h">
            <div :style="fontSizeFun" class="index-l-4-echarts" ref="reachRef"></div>
        </div>
    </div>
    <div class="set-cherts new-h">
        <div class="top-s" style="font-size: 14px;">碳指标</div>
        <div class="set-con new-c-h">
            <div :style="fontSizeFun" class="index-l-4-echarts" ref="reachRefTwo"></div>
        </div>
    </div>
    <div class="set-cherts new-s">
        <div class="top-s" style="font-size: 14px;">pack关键指标达成率</div>
        <div class="set-con">
            <!-- <div :style="fontSizeFun" class="index-l-4-echarts" ref="reachRefFour"></div> -->
            <div class="set-c">
                <ul class="set-c-u">
                    <li class="set-c-u-img">
                        <img src="../assets/factory-min-4.png" />
                    </li>
                    <li class="set-c-u-c">
                        <div class="set-c-u-con set-c-u-top"><span>人数：</span><p>134</p></div>
                        <div class="set-c-u-con set-c-u-c"><span>线体数：</span><p>396</p></div>
                        <div class="set-c-u-con"><span>产能数：</span><p>1089</p></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'index-r',
  data() {
    return {
        
    };
  },
  components: {},
  mounted() {
    let that = this
    that.$nextTick(() => {
        that.fontSizeFun(14)
        that.initCharts()
        that.initChartsTwo()
        // that.initChartsFour()
    })
  },
  methods: {
    fontSizeFun(val,initWidth=1920){
        const nowClientWidth = document.documentElement.clientWidth
        return val * (nowClientWidth/initWidth) + 'px'
    },
    initCharts(){
        let myChart = echarts.init(this.$refs.reachRef)
        window.addEventListener('resize',() => {
            myChart.resize()
        })
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}：共{c}<br/>所在比率：{d}%',
                position: function (point, params, dom, rect, size) {
                    //  size为当前窗口大小
                    if ((size.viewSize[0] / 2) >= point[0]) {
                        //其中point为当前鼠标的位置
                        return [point[0] + 50, '10%'];
                    } else {
                        //其中point为当前鼠标的位置
                        return [point[0] - 200, '10%'];
                    }
                }
            },
            legend: {
                top: 'bottom',
                data: [
                    {name: '电',icon: 'circle',textStyle:{color:'#FFFFFF'}},
                    {name: '天然气',icon: 'circle',textStyle:{color:'#FFFFFF'}},
                    {name: '水',icon: 'circle',textStyle:{color:'#FFFFFF'}},
                    {name: '蒸汽',icon: 'circle',textStyle:{color:'#FFFFFF'}},
                    {name: '其它',icon: 'circle',textStyle:{color:'#FFFFFF'}},
                ],
            },
            grid: {
                left: '3%',
                right: 10,
                bottom: 4,
                top: 20,
                containLabel: true,
            },
            series: [
                {
                    type: 'pie',
                    radius: [32, 90],
                    center: ['50%', '40%'],
                    roseType: 'area',
                    itemStyle: {
                        barBorderRadius: 3,
                    },
                    data: [
                        { value: 80, name: '电',itemStyle:{color:'#00E5FF'} },
                        { value: 60, name: '天然气',itemStyle:{color:'#22FFF0'} },
                        { value: 70, name: '水',itemStyle:{color:'#44FFCF'} },
                        { value: 60, name: '蒸汽',itemStyle:{color:'#009ADF'} },
                        { value: 70, name: '其它',itemStyle:{color:'#005ABF'} }
                    ],
                    label: {
                        color: '#FFFFFF',
                    },
                    emphasis: {
                        itemStyle: {
                            shadowColor: 'rgba(0,0,0,0)'
                        }
                    }
                },
            ]
        }
        return option && myChart.setOption(option)
    },
    initChartsTwo(){
        let myChart = echarts.init(this.$refs.reachRefTwo)
        window.addEventListener('resize',() => {
            myChart.resize()
        })
        let option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'line',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                show: false,
                left: '99%',
                right: 0,
                top: '15%',
                orient: 'vertical',
                itemGap: 10, 
                itemWidth:20,
                itemHeight:12
            },
            grid: {
                left: '3%',
                right: 10,
                bottom: 10,
                top: 20,
                containLabel: true,
                borderColor: 'rgb(61,61,61)'
            },
            xAxis: {
                type: 'category',
                boundaryGap : true,
                // position: 'bottom',
                data: ['1月','2月','3月','4月','5月','6月','7月'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.3)'
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    color: "rgba(255,255,255,1)",
                    margin: 10,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "rgba(255,255,255,0.06)"
                    }
                }
            },
            yAxis: {
                type: 'value',
                data: ['产出达成率', 'DT损失率', 'FTY达成率', '任务完成率'],
                axisTick: {
                    show: false,
                },
                axisLabel: {
                   color: "rgba(255,255,255,1)"
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "rgba(255,255,255,0.06)"
                    }
                },
                splitArea:{
                    show: false,
                    areaStyle:{
                        color: 'rgba(255,255,255,0.02)',
                    }
                },
            },
            series: [
                {
                    data: [80, 62, 46, 50,62, 46, 50],
                    type: 'line',
                    showBackground: true,
                    showSymbol: false,
                    smooth: true,
                    backgroundStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    },
                    barWidth:'20%',
                    label: {
                        show: false,
                        // position: 'left',
                        offset: [],
                        formatter: '{c}%',
                        textStyle: {
                            color: '#14E0FF',
                            // fontSize: 14,
                        }
                    },
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: '#00E5FF',
                            }
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                                {
                                    offset: 0, 
                                    color: 'rgba(0,229,255,0.4)'
                                },
                                {
                                    offset: 1, 
                                    color: 'rgba(0,229,255,0)'
                                }
                            ]),
                        }
                    },
                }
            ]
        }
        return option && myChart.setOption(option)
    },
    // initChartsFour(){
    //     let myChart = echarts.init(this.$refs.reachRefFour)
    //     window.addEventListener('resize',() => {
    //         myChart.resize()
    //     })

    //     // let option = {
    //     //     angleAxis: {
    //     //         type: 'category',
    //     //         data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
    //     //         axisLine: {
    //     //             show: true,
    //     //             lineStyle: {
    //     //                 color: "rgba(255,255,255,0.7)"
    //     //             }
    //     //         },
    //     //     },
    //     //     radiusAxis: {
    //     //         axisLabel: {
    //     //             textStyle: {
    //     //                 color: 'rgba(255,255,255,0.7)'
    //     //             }
    //     //         },
    //     //         axisLine: {
    //     //             show: true,
    //     //             lineStyle: {
    //     //                 color: 'rgba(255,255,255,0.7)'
    //     //             }
    //     //         },
    //     //         axisTick: {
    //     //             show: true,
    //     //         },
    //     //         splitLine: {
    //     //             show: true,
    //     //             lineStyle: {
    //     //                 color: "rgba(255,255,255,0.7)"
    //     //             }
    //     //         }
    //     //     },
    //     //     polar: {
    //     //         center: ['45%','50%'],
    //     //         radius: [0, '80%'],
    //     //     },
    //     //     series: [
    //     //         {
    //     //             name: '任务完成',
    //     //             type: 'bar',
    //     //             data: [1, 2, 3, 4, 3, 5, 1],
    //     //             coordinateSystem: 'polar',
    //     //             stack: 'a',
    //     //             emphasis: {
    //     //                 focus: 'series'
    //     //             }
    //     //         },
    //     //         {
    //     //             name: 'FTY达成',
    //     //             type: 'bar',
    //     //             data: [2, 4, 6, 1, 3, 2, 1],
    //     //             coordinateSystem: 'polar',
    //     //             stack: 'a',
    //     //             emphasis: {
    //     //                 focus: 'series'
    //     //             }
    //     //         },
    //     //         {
    //     //             name: 'DT损失',
    //     //             type: 'bar',
    //     //             data: [1, 2, 3, 4, 1, 2, 5],
    //     //             coordinateSystem: 'polar',
    //     //             stack: 'a',
    //     //             emphasis: {
    //     //                 focus: 'series'
    //     //             }
    //     //         }
    //     //     ],
    //     //     legend: {
    //     //         show: true,
    //     //         orient: 'vertical',
    //     //         right: 40,
    //     //         y: 'center',
    //     //         data: ['任务完成', 'FTY达成', 'DT损失'],
    //     //         textStyle: {
    //     //             color: '#FFFFFF',
    //     //         },
    //     //     }
    //     // };
    //     // return option && myChart.setOption(option)

    //     let option = {
    //         tooltip : {
    //             trigger: 'axis',
    //             axisPointer: {
    //                 type: 'line',
    //                 label: {
    //                     backgroundColor: '#6a7985'
    //                 }
    //             }
    //         },
    //         legend: {
    //             show: false,
    //             left: '99%',
    //             right: 0,
    //             top: '15%',
    //             orient: 'vertical',
    //             itemGap: 10, 
    //             itemWidth:20,
    //             itemHeight:12
    //         },
    //         grid: {
    //             left: '3%',
    //             right: '15%',
    //             bottom: 0,
    //             top: 10,
    //             containLabel: true,
    //             borderColor: 'rgb(61,61,61)'
    //         },
    //         xAxis: {
    //             type: 'value',
    //             boundaryGap : true,
    //             // position: 'bottom',
    //             axisLine: {
    //                 show: false
    //             },
    //             axisTick: {
    //                 show: false,
    //             },
    //             axisLabel: {
    //                 show: false,
    //                 color: "rgba(255,255,255,0.6)",
    //                 margin: 10,
    //             },
    //             splitLine: {
    //                 show: false,
    //                 lineStyle: {
    //                     color: "rgba(255,255,255,0.06)"
    //                 }
    //             }
    //         },
    //         yAxis: {
    //             type: 'category',
    //             data: ['产出达成率', 'DT损失率', 'FTY达成率', '任务完成率'],
    //             axisTick: {
    //                 show: false,
    //             },
    //             axisLabel: {
    //                 show: false,
    //                 color: "rgba(255,255,255,1)"
    //             },
    //             axisLine: {
    //                 show: false,
    //             },
    //             splitLine: {
    //                 show: false,
    //                 lineStyle: {
    //                     color: "rgba(255,255,255,0.06)"
    //                 }
    //             },
    //             splitArea:{
    //                 show: false,
    //                 areaStyle:{
    //                     color: 'rgba(255,255,255,0.02)',
    //                 }
    //             },
    //         },
    //         series: [
    //             {
    //                 data: [30, 34, 40, 43],
    //                 type: 'bar',
    //                 showBackground: true,
    //                 backgroundStyle: {
    //                     color: 'rgba(255,255,255,0.1)'
    //                 },
    //                 barWidth:'30%',
    //                 label: {
    //                     show: true,
    //                     position: 'left',
    //                     offset: [],
    //                     formatter: '{c}%',
    //                     textStyle: {
    //                         color: '#14E0FF',
    //                         // fontSize: 14,
    //                     }
    //                 },
    //                 itemStyle: {
    //                     normal: {
    //                         color: new echarts.graphic.LinearGradient( 1, 0, 0, 0,[
    //                             {
    //                                 offset: 0, 
    //                                 color: 'rgba(0,229,255,1)'
    //                             },
    //                             {
    //                                 offset: 1, 
    //                                 color: 'rgba(0,229,255,0)'
    //                             }
    //                         ]),
    //                     }
    //                 },
    //             }
    //         ]
    //     }
    //     myChart.setOption(option)
    //     setTimeout(() => {
    //         let width = myChart.getWidth()
    //         if(width && width !== 0){
    //             let opt = myChart.getOption();
    //             let grid = opt.grid[0];
    //             let right = grid.right;
    //             let left = grid.left;
    //             right = width*parseFloat(right)/100;
    //             left = width*parseFloat(left)/100;
    //             let x = width-left-right;
    //             option.series[0].label.offset = [x + 50,0]
    //         }
    //         return option && myChart.setOption(option)
    //     },200)
    // },
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar{
    width: 2px;
    height: 2px;
}
::-webkit-scrollbar-track {
    background: rgba($color: #f3f4f9, $alpha: 0.1);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb {
    background: rgba($color:  #c8d2e0, $alpha: 0.1);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba($color:   #b4b4b4, $alpha: 0.1);
}
::-webkit-scrollbar-corner {
    background: rgba($color:    #c8d2e0, $alpha: 0.1);
}
// 火狐
* {
    scrollbar-color: #c8d2e0 #f3f4f9;
    /* 滑块颜色  滚动条背景颜色 */
    scrollbar-width: thin;
    /* 滚动条宽度有三种：thin、auto、none */
}
.set-con{
    width: 100%;
    height: 78%;
    overflow: hidden;
    .set-c{
        width: 100%;
        .set-c-u{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            .set-c-u-img{
                width: 70%;
                overflow: hidden;
                img{
                    display: block;
                    width: 100%;
                    height: auto;
                    margin-top: -30px;
                    filter:opacity(70%);
                }
            }
            .set-c-u-top{
                margin-top: 40px!important;
            }
            .set-c-u-con{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                margin-top: 10px;
                span{
                    display: block;
                    font-weight: 600;
                    font-size: 14px;
                    color: rgb(0, 229, 255);
                    margin-right: 4px;
                }
                p{
                    font-size: 14px;
                }
            }
        }
    }
}
.new-c-h{
    height: 84%;
}
.set-con:hover{
    overflow: hidden;
}
.set-flex{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#index-r{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    .set-cherts{
        width: 100%;
        height: 32.7%;
        background: rgba($color: #005ABF, $alpha: 0.2);
        .top-s{
            padding: 10px 0 10px 10px;
            font-weight: 600;
            // font-size: 0.2rem;
            font-style: oblique;
            background: rgba($color: #005ABF, $alpha: 0.4);
        }
        .index-l-4-echarts{
            width: 100%;
            height: 100%;
        }
    }
    .new-h{
        height: 39%;
    }
    .new-s{
        height: 20%;
    }
}
</style>